<template>
  <!-- 删除企业/ 更换绑定 -->
  <view class="deleteBusiness">
    <view class="content">
      <view class="content-item">
        <u-form :model="form" ref="form" label-width="280" labelPosition="’top‘" :error-type="errorType">
          <!-- 更换绑定的 -->
          <block v-if="companyStatus != 3 && companyStatus != 4">
            <u-form-item label="新的绑定人手机号：" borderBottom>
              <u--input v-model="form.newMobile" placeholder="请输入更换后的手机号码" type="number" :maxlength="11"
                @blur="phoneHandle" border="none"></u--input>
            </u-form-item>
            <view class="noticeInfo">
              <u-icon name="info-circle-fill" color="#DCDCDC"></u-icon>
              <view class="text">请注意更换后的手机号必须为该小程序注册的用户。</view>
            </view>
          </block>

          <u-form-item label="负责人验证" borderBottom>
            <u--input v-model="form.mobile" border="none" readonly></u--input>
          </u-form-item>
          <u-form-item borderBottom>
            <view class="codeForm">
              <u--input v-model="form.mobileCode" placeholder="填写验证码" :maxlength="6" border="none"></u--input>

              <u-code :startText="'获取验证码'" :endText="'获取验证码'" ref="uCode" @change="codeChange"></u-code>
              <button class="lookbtn code-btn" @tap="getCode">
                {{ tips }}
              </button>
            </view>
          </u-form-item>
        </u-form>
      </view>
    </view>

    <view class="btns">
      <button class="reset-btn lt cancelBtn" type="primary" @click="resethandle">
        取消
      </button>
      <button class="submit-btn" type="primary" @click="submitHandle">
        确认
      </button>
    </view>
  </view>
</template>

<script>
  import {
    messageDetail,
    messageSendsms,
    messageDelete,
    findMiniName,
    changeUser,
  } from "@/api/myself.js";
  import {
    Toast,
    navBack
  } from "@/utils/util.js";

  export default {
    name: "deleteBusiness",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        companyStatus: "", //状态   1.审核中 2.审核通过 3.审核失败
        form: {},
        errorType: ["none"],
        options: {},
        detail: {},
        tips: "",
      };
    },
    onLoad(options) {
      this.options = options;
      this.getList(options.id);
    },
    methods: {
      phoneHandle() {
        if (!this.form.newMobile) {
          Toast("请输入新的绑定人手机号");
          return;
        }

        if (this.form.newMobile && !this.$u.test.mobile(this.form.newMobile)) {
          Toast("请输入正确的手机号");
          return;
        }

        findMiniName(this.form.newMobile).then((res) => {
          if (!res.result.length) {
            this.form.newMobile = "";
            this.form.miniUserId = "";
            Toast("该用户未注册小程序，请先前往注册！");
            return;
          }

          this.form.miniUserId = res.result[0].id;
        });
      },
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: "正在获取验证码",
          });
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast("验证码已发送");
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
            let data = {
              companyId: this.detail.companyInfo.id,
              mobile: this.form.mobile,
              smsType: this.companyStatus != 3 && this.companyStatus != 4 ?
                "CHANGE_MOBILE" :
                "DELETE_MOBILE",
            };

            messageSendsms(data).then((res) => {});
          }, 2000);
        }
      },
      resethandle() {
        uni.navigateBack();
      },
      submitHandle() {
        let {
          mobileCode,
          newMobile,
          miniUserId
        } = this.form;
        if (this.companyStatus != 3 && this.companyStatus != 4) {
          if (!newMobile) {
            Toast("请输入新的绑定人手机号");
            return;
          }

          if (newMobile && !this.$u.test.mobile(newMobile)) {
            Toast("请输入正确的手机号");
            return;
          }
        }

        if (!mobileCode) {
          Toast("请输入验证码");
          return;
        }

        let number = /^[0-9]*$/;
        if (!number.test(mobileCode)) {
          Toast("请输入数字");
          return;
        }

        if (this.companyStatus != 3 && this.companyStatus != 4) {
          let data = {
            companyId: this.detail.companyInfo.id,
            miniUserId: miniUserId,
            mobileCode: mobileCode,
          };
          changeUser(data).then((res) => {
            if (res.code == 200) {
              Toast("更换绑定成功");
              navBack();
              return;
            }

            Toast(res.message);
          });
        } else {
          messageDelete(this.detail.companyInfo.id, this.form.mobileCode).then(
            (res) => {
              if (res.code == 200) {
                if (this.companyStatus == 3) {
                  Toast("删除企业成功");
                  navBack("back", +this.options.backIndex);
                }

                if (this.companyStatus == 4) {
                  Toast("您的企业已被退出纳管!");
                  navBack();
                }
                return;
              }

              Toast(res.message);
            }
          );
        }
      },
      getList(id) {
        messageDetail({
          companyId: id
        }).then((res) => {
          if (res.code == 200) {
            this.detail = res.result;
            this.companyStatus = res.result.auditInfo.companyStatus;
            this.form.mobile = res.result.dutyPersonInfo.mobile;

            uni.setNavigationBarTitle({
              title: this.companyStatus == 3 || this.companyStatus == 4 ?
                "删除企业" :
                "更换绑定",
            });
          }
        });
      },
    },
  };
</script>

<style lang="scss">
  .deleteBusiness {
    flex: 1;
    background-color: #f9f9f9;

    .content {
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      width: calc(100% - 35rpx);
      height: calc(100vh - 84px);
      overflow-y: auto;

      .content-item {
        padding: 25rpx;
        background: #fff;

        .code-btn {
          color: #2488f5;
          font-size: 28rpx;
        }

        .codeForm {
          display: flex;
          justify-content: space-around;
        }
      }
    }

    .noticeInfo {
      display: flex;
      align-items: baseline;
      margin-top: 15rpx;
      color: #878484;
      font-size: 24rpx;

      .text {
        padding-left: 10rpx;
      }
    }
  }
</style>